<template>
	<div>
		<h1>清除浮动</h1>
		<main>
			<ul class="clearfix">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</main>
		<p>111</p>
	</div>
</template>

<script>
	export default {}
</script>

<style lang="scss" scoped>
	ul {
		border: 1px solid #ccc;
		// overflow: hidden;
		li {
			float: left;
			width: 200px;
			height: 200px;
			background-color: yellow;
			&:nth-child(2n) {
				background-color: skyblue;
			}
		}
	}
	.clearfix {
		zoom: 1;
		&::after {
			content: '';
			display: block;
			visibility: hidden;
			clear: both;
		}
	}
</style>
